<!DOCTYPE html>
<body>
<script src="../../../resources/js-test.js"></script>

<div id="f1">
  <div tabindex="1" id="div1"></div>
</div>

<script type="text/javascript">
description('Making a focused element invisible should make it blur.');
jsTestIsAsync = true;
var focusTarget = document.getElementById('div1');
var testStage = 0;

document.body.onload = function() {
    focusTarget.focus();

    shouldBe('document.activeElement', 'focusTarget', true);
    debug('===> Setting display:none');
    f1.style.display = 'none';

    setTimeout(function() {
        testFailed('Timeout: Didn\'t loose focus.');
        finishJSTest();
    }, 1000);
};

focusTarget.addEventListener('blur', function() {
    debug('Event: blur');
    shouldBe('document.activeElement', 'document.body');
    testPassed('The focusTarget element lost focus.');

    debug('');
    if (testStage++ == 0) {
        f1.style.display = 'block';
        focusTarget.focus();
        shouldBe('document.activeElement', 'focusTarget', true);
        debug('===> Setting visibility:hidden');
        f1.style.visibility = 'hidden';
    } else
        finishJSTest();
}, false);

</script>
</body>
